// ------------------------ 发送请求，获取首页需要的统计数据 -------------------
axios.get('/dashboard').then(({ data: res }) => {
  // 解构数据
  // 方案一
  // let {message,data:{overview, provinceData, salaryData, year}} = res
  // 方案二
  let { groupData, overview, provinceData, salaryData, year } = res.data
  // 设置最上面的概览区的数据
  for(let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key];
  }

  // 调用创建图表的函数
  lineChart(year);
  classSalaryChart(salaryData);
  groupSalaryChart(groupData);
  sexSalaryChart(salaryData);
  mapChart(provinceData);
})

//----------------------折线图：全学科薪资走势--------------------------------
//1.有一个盒子（页面布局  id=“line”）
//2.引入echarts.min,js
//3.初始化echarts

function lineChart(data) {
    let myChart = echarts.init(document.querySelector('#line'));
    let option = {
        title: {
            // 标题配置
            text:'2022全学科薪资走势',
            // 位置配置
            top: 15,
            left: 10,
            // 文字大小
            textStyle: {
                fontSize: 16
            }
        },
        xAxis: {
          type: 'category',
           //占满整个x轴
        //    boundaryGap: false,
          // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          data: data.map(item => item.month),
           //x轴文字颜色
           axisLabel: {
            color : '#999'
           },
           //x轴轴线颜色
           axisLine : {
            lineStyle: {
                color : '#ccc',
                type : 'dashed'
            }
           }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
                type: 'dashed'
            }
          }
        },
          // 鼠标进入提示
          tooltip: {
            trigger: 'axis'
          },
        //网格
        grid:{
            top: '20%'
         },
        //颜色
         color: {
            type: 'linear', //线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        series: [
          {
            // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
            data: data.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 6
            },
            symbolSize: 10,
            areaStyle: {
                color: {
                    type: 'linear', //线性渐变
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#499FEE' // 0% 处的颜色
                    }, {
                        offset: 0.8, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                    },{
                        offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
            }
          }
        ]
      };
      myChart.setOption(option);
}



//-----------------------饼图：班级平均薪资-------------------------------------------
function classSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#salary'));
    let option = {
        // 标题
        title: {
            text: '班级薪资分布',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16
            }
        },
        // 图例
        legend: {
            left : 'center',
            bottom:'6%',
            itemWidth: 20
        },
        // 鼠标进入样式
        tooltip: {
          trigger: 'item'
        },
        // 颜色
       color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'] , 
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            center:['50%','50%'],
            radius: ['50%', '64%'],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2 //设置图例色块大小
            },
            label: {
              show: false,//每个扇形的描述文字，false不显示
            // position: 'center'//文字显示位置
            },
            labelLine: {
              show: false //标签文字引导线
            },
            data: data.map(item => {
              return {
                value: item.g_count + item.b_count,
                name: item.label
              }
            })
          }
        ]
      };
    myChart.setOption(option);
    };



//------------------------柱状图：每组薪资--------------------------------------------
function groupSalaryChart(data) {
  // console.log(data);
    const myChart = echarts.init(document.querySelector('#lines'))
    const option = {
        // x轴
        xAxis: {
            type: 'category',
            // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
            data:data[1].map(item => {return item.name}),
            // 配置x轴样式
            axisLine: {
                lineStyle: {
                    color:'#ccc', //x轴线的颜色
                    type:'dashed' //
                }
            },
            axisLabel: {
                color : '#999' //文字颜色
            }
          },
        // y轴
          yAxis: {
            type: 'value',
            // Y轴分割线
            splitLine: {
                lineStyle: {
                    type:'dashed' //
                }
            }
          },
         //网格配置
          gird: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50
          },
         // 鼠标移入配置
         tooltip: {
            trigger: 'item'
         },
          //  颜色
          color: [
            {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34D39A' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }],
          series: [
            {
                // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
                data: data[1].map(item => {return item.hope_salary}),
                type: 'bar',
                name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
              },
              {
                // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
                data:data[1].map(item => {return item.salary}),
                type: 'bar',
                name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
              }
          ]
    }
    myChart.setOption(option)

    // 给8个盒子的父元素注册点击事件
    document.querySelector('#btns').addEventListener('click',function(e){
      // 判断点击的是不是button按钮
      if (e.target.tagName === 'BUTTON') {
        // 定义一个变量接收e.target的值
        let i = e.target.innerHTML;
        // 利用排他思想，先移除btn-blue类
        document.querySelector('#btns .btn-blue').classList.remove('btn-blue');
        // 谁点击给谁添加btn-blue类
        e.target.classList.add('btn-blue');
        // 给每一组传具体的数据
        option.xAxis.data  = data[i].map(item => {return item.name});
        option.series[0].data = data[i].map(item => {return item.hope_salary});
        option.series[1].data = data[i].map(item => {return item.salary});
        // 修改了配置项之后，重新创建图表即可
        myChart.setOption(option);
      }
    })
}

//------------------------饼图：男女生平均薪资-----------------------------------------
function sexSalaryChart(data) {
    let myChart = echarts.init(document.querySelector('#gender'));
    let option = {
        // 标题配置
        title: [
            {
                text:'男女薪资分布',
                left: 15,
                top: 20,
                textStyle: {
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: '45%', // 10 表示10px
                top: '45%',
                textStyle: {
                  fontSize: 12
                }
              },
              {
                text: '女生',
                left: '45%', // 10 表示10px
                top: '85%',
                textStyle: {
                  fontSize: 12
                }
              }
            ],
        // 鼠标移入配置
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '男生薪资分布',
            type: 'pie',
            radius: ['20%', '30%'],
            center: ['50%', '30%'],
            label: {
                show: true,//每个扇形的描述文字，false不显示
              // position: 'center'//文字显示位置
              },
              labelLine: {
                show: true //标签文字引导线
              },
            data: data.map(item => {
              return {
                value: item.b_count,
                name: item.label
              }
            })
          },
          {
            name: '男生薪资分布',
            type: 'pie',
            radius: ['20%', '30%'],
            center: ['50%', '70%'],
            label: {
                show: true,//每个扇形的描述文字，false不显示
              // position: 'center'//文字显示位置
              },
              labelLine: {
                show: true //标签文字引导线
              },
            data: data.map(item => {
              return {
                value: item.g_count,
                name: item.label
              }
            })
          }
        ]
      };
    myChart.setOption(option);
}

//-----------------------地图：籍贯分布------------------------------------------------
function mapChart(data) {
  // 可以提前准备好数据
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0},
    { name: '天津', value: 0},
    { name: '上海', value: 0},
    { name: '重庆', value: 0},
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0},
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0},
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  mapData.forEach(item => {
    let res = data.find(v => {
        //  return '条件';
         return v.name.includes(item.name);
     })
     if (res) {
         item.value = res.value
     }
  })
    let myChart = echarts.init(document.querySelector('#map'))
    let option = {
        title: {
            text:'籍贯分布',
            top: 10,
            left: 10,
            fontSize: 16
        },
         //  视觉映射组件
         visualMap: {
          type: 'continuous', // continuous表示连续型； piecewise表示分段式
          min: 0,
          max: 10, // 看每个地区的学员多少，再来决定
          inRange: {
            color: ['#fff', '#0075F0']
          },
          text: [10, 0], // 两端的文字
          left: 40,
          bottom: 20
        },
        tooltip: {
          formatter: '{b}：{c}位学员',
          // 调整样式
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
           name: '籍贯分布',
           type: 'map', //图表的类型是地图
           map: 'china', //表示中国地图
           data: mapData,
           label: {
            show: true, //  文字大小，默认显示文字
            fontSize: 10,
            color: 'rgba(0,0,0,0.7)'
           },
           itemStyle: { // 默认的背景色
            areaColor: '#E0FFFF' ,//每个省的颜色
            borderColor: 'rgba(0, 0, 0, 0.2)'
           },
           emphasis: {  // 鼠标移入高亮状态下的效果（换背景色）
            itemStyle: {
              areaColor: '#34D39A',
              borderWidth: 0,
              shadowBlur:20,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
           },

        }]
    }
    myChart.setOption(option)
}
